<template>
	<div style="display:flex;background:'rgba(252, 252, 252, 0.8)">
		<div class="articleview">
			<div class="top">
				<div class="title">{{ article.title }}</div>
				<div style="display:flex;justify-content:space-between">
					<div class="category">
						<span @click="$router.push('/store/' + article.store.id)">{{ article.store.name
						}}</span>&ensp;&ensp;|&ensp;&ensp;阅读&ensp;{{
	article.viewcount
}}&ensp;&ensp;|&ensp;&ensp;评论&ensp;{{ comment.length }}
						&ensp;&ensp;|&ensp;{{ article.first_pub | format }}
					</div>
				</div>

			</div>
			<div class="main">
				<mavon-editor class="me-editor" ref="md" v-model="editor.value" @imgAdd="imgAdd" :ishljs="true"
					previewBackground="#ffffff" boxShadowStyle="none" placeholder="在这输入正文" v-bind="editor">
				</mavon-editor>
				<div class="annex" v-if="article.annexid">
					<div>
						<div style="font-weight:600;">附件：</div>
						<i class="el-icon-document"></i>&ensp;{{ article.annexname }}
						<a class="downloadFile" @click="download" v-if="hasAuth()">下载</a>
					</div>

					<video width="320" height="220" controls v-if="annexMV">
						<source :src="annexMV" type="video/mp4">
					</video>
				</div>
			</div>
			<div class="comment">
				<div class="me-view-comment-write">
					<el-row>

						<div width="40" height="40" style="display: flex;margin-bottom: 10px;">
							<a style="margin-right: 5px;">
								<div class="picture">
									<img class="me-view-picture" :src="user.face">
								</div>
							</a>
							<el-input type="textarea" :autosize="{ minRows: 2 }" placeholder="你的评论..." maxlength="300"
								class="me-view-comment-text" v-model="subcomment.content" resize="none">
							</el-input>
						</div>
						<el-button type="button" size="small" round @click="publishComment()" style="float: right;">评论
						</el-button>
					</el-row>

				</div>

				<div style="opacity: 1;padding:5px,20px;background:rgba(255,255,255,0.8);border-radius: 8px;"
					v-if="comment.length > 0">
					<div class="me-view-comment-title">
						<span>{{ comment.length }} 条评论</span>
					</div>
					<commentview v-for="comment in comment" :key="comment.id" :comment="comment" :id="comment.id"
						@getcomment="getcomment" class="commentcard">
					</commentview>

				</div>
				<el-empty description="暂无评论" v-else></el-empty>
			</div>
			<el-skeleton :rows="15" animated :loading="loading" />
		</div>
		<div class="right">
			<div class="card">
				<div
					style="display:flex;align-items:center;width:100%;border-bottom:1px solid #e4e6eb;padding-bottom:10px;">
					<img @click="view(article.author.id)" style="cursor: pointer;" :src="article.author.face" alt="">
					<div>
						<a @click="view(article.author.id)" class="name" style="cursor: pointer;">{{
							article.author.username
						}}</a>
						<div class="storename" @click="$router.push('/store/' + article.store.id)">{{ article.store.name }}库
						</div>
					</div>
				</div>
				<div style="width:100%;margin:5px 10px;">
					<div class="list">
						收藏量&ensp;<span style="color:blue;font-size:13px">{{ article.collections }}</span>
					</div>
					<div class="list">
						阅读量&ensp;<span style="color:blue;font-size:13px">{{ article.viewcount }}</span>
					</div>
					<div class="list">
						评论数&ensp;<span style="color:blue;font-size:13px">{{ comment.length }}</span>
					</div>
				</div>
			</div>
			<div class="card2">
				<el-button :icon="article.iscollect ? 'el-icon-star-on' : 'el-icon-star-off'" circle
					:type="article.iscollect ? 'warning' : ''" size="medium" @click="collectArticle"></el-button>
				<el-button @click="editArticle()" plain type="primary" icon="el-icon-edit" circle
					v-if="user.id == article.author.id" size="medium"></el-button>
				<el-button type="danger" plain icon="el-icon-delete" circle @click="deletearticle()" size="medium"
					v-if="user.id == article.author.id">
				</el-button>
				<el-button type="success" plain icon="el-icon-download" circle @click="copyArticle"
					size="medium"></el-button>
				<el-button icon="el-icon-share" type="primary" circle @click="copyUrl" size="medium"></el-button>
			</div>
		</div>
	</div>
</template>

<script>
import {
	getonearticle,
	getcomment,
	recall,
	deleteArticle,
	upload,
	starArticle,
	getAnnex
} from '../api/api.js'
import {
	mavonEditor
} from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import download from 'downloadjs'; // 引用插件
import commentview from '../components/comment/commentview.vue'
export default {
	name: 'articleview',
	components: {
		commentview,
		mavonEditor
	},
	data() {
		return {
			loading: true,
			user: JSON.parse(window.sessionStorage.getItem('user')),
			annexMV: '',
			article: {
				id: '',
				title: '',
				content: '',
				annexid: '',
				annexname: '',
				annextype: '',
				isprivate: '',
				auth: '',
				store: {
					id: '',
					name: ''
				},
				author: {
					id: '',
					username: '',
					face: '',
				},
				viewcount: '',
				first_pub: '',
				last_pub: '',
				parentid: '',
				collections: '',// 收藏数量
				iscollect: false //是否被你收藏
			},
			editor: {
				value: "",
				toolbarsFlag: false,
				subfield: false,
				defaultOpen: 'preview'
			},
			comment: '',
			subcomment: {
				articleId: '',
				content: '',
				level: 1,
			}

		}
	},
	created() {
		this.getthisarticle(this.$route.params.id);
		this.getcomment()
		document.body.scrollTop = document.documentElement.scrollTop = 0;
	},
	mounted() {
		this.loading = false;
		this.$set(this.editor, 'ref', this.$refs.md)
	},
	methods: {
		download() {
			getAnnex(this.article.annexid).then(res => {
				download(res.data.url);
			})
		},
		copyUrl() {
			var oInput = document.createElement("input"); //创建隐形input
			oInput.value = window.location.href; // window.location.href 浏览器URL
			document.body.appendChild(oInput);
			oInput.select();
			document.execCommand("Copy");
			oInput.remove();
			this.$message.success("复制文章链接成功");
		},
		copyArticle() {
			download(this.article.content, this.article.title + '.md');
			// var oInput = document.createElement("input"); //创建隐形input
			// oInput.value = '作者' + this.article.author.username + '————来自LULU 乐享' + this.article.content;
			// document.body.appendChild(oInput);
			// oInput.select();
			// document.execCommand("Copy");
			// oInput.remove();
			// this.$message.success("复制文章内容成功");
		},
		collectArticle() {
			starArticle(this.article.id, this.article.author.id, this.article.iscollect).then(res => {
				if (res.data.code == 200) {
					this.article.iscollect = !this.article.iscollect;
					this.$message.success(res.data.message);
				} else {
					this.$message.error('操作失败，请稍后重试');
				}
			})
		},
		getthisarticle(id) {
			getonearticle(id).then(resp => {
				if (resp.data.code == 200) {
					this.article = resp.data.data[0];
					document.title = `${this.article.title} —— LULU 乐享`
					this.editor = { ...this.editor, value: this.article.content };
					if (this.article.annextype && (this.article.annextype == 'mp4' || this.article.annextype == 'rmvb' || this.article.annextype == 'avi') && this.hasAuth()) {
						getAnnex(this.article.annexid).then(res => {
							this.annexMV = res.data.url;
						})
					}
				} else {
					this.$message.warning(resp.data.message);
				}
			})
		},
		getcomment() {
			getcomment(this.$route.params.id).then(resp => {
				if (resp.data.code == 200) {
					this.comment = resp.data.data.filter(item => item.level == 1);
				} else {
					this.$message.warning(resp.data.message)
				}

			})
		},
		publishComment() {
			this.subcomment.articleId = this.$route.params.id;
			this.subcomment.toUserid = this.article.author.id;
			if (this.subcomment.content.length < 1) {

				this.$message.warning("评论不能为空")
			}
			else {
				recall(this.subcomment).then(resp => {
					if (resp.data.code == 200) {
						this.$message.success("评论成功")
						this.getcomment();
						this.subcomment.content = '';
					} else {
						this.$message.error(resp.data.message)
					}
				})
			}

		},
		editArticle() {
			this.$router.push({
				path: `/write/${this.article.store.id}/${this.article.parentid}/${this.article.id}`
			})
		},
		deletearticle() {
			this.$confirm('文章将会删除, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.delete();
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消'
				})
			});
		},
		delete() {
			deleteArticle(this.article.id).then(resp => {
				if (resp.data.code == 200) {
					this.$message.success("删除成功")
					this.$router.go(-1);
				} else {
					this.$message.error(resp.data.message)
				}
			})
		},
		imgAdd(pos, $file) {
			let that = this
			let formdata = new FormData();
			formdata.append('image', $file);
			const imgType = ['image/jpeg', 'image/png'];
			const isLt2M = $file.size / 1024 / 1024 < 2;
			if (!imgType.includes($file.type)) {
				this.$message.error('上传图片仅支持JPG、PNG格式!');
				that.$refs.md.$img2Url(pos, ' ');
			} else if (!isLt2M) {
				this.$message.error('注意上传图片大小不能超过2MB!');
				that.$refs.md.$img2Url(pos, ' ');
			} else {
				upload(formdata).then(resp => {
					// 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
					if (resp.data.code == 200) {

						that.$refs.md.$img2Url(pos, `${resp.data.data}`);
					} else {
						that.$message({
							message: `${resp.data.message}`,
							type: 'error',
							showClose: true
						})
					}

				}).catch(err => {
					that.$message({
						message: err,
						type: 'error',
						showClose: true
					});
				})
			}
		},
		view(id) {
			this.$router.push(`/userinfo/${id}`)
		},
		//是否有下载权限
		hasAuth() {
			if (this.article.auth !== 0) {
				if (this.article.auth == 1 && this.article.author.id != this.user.id) {
					return false;
				} else if (this.article.auth == 2 && this.article.author.id != this.user.id && this.user.id != this.article.store.founderid) {
					return false;
				}
			}
			return true;
		}
	}
}
</script>

<style scoped="scoped">
.el-button--warning {
	color: #FFF;
	background-color: #faad39;
	border-color: #fcb345;
}

.el-icon-document {
	color: #5484ff;
	font-weight: 600;
	font-size: 17px;
}

.articleview {
	margin-top: 20px;
	min-width: 800px;
	min-height: 700px;
	background: rgba(252, 252, 252, 0.8);
	border-radius: 5px;
	margin-left: 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.top {
	flex: 1;
	height: 100px;
	padding-top: 30px;
	margin: 0 45px;
}

.right {
	margin-top: 30px;
	margin-right: 30px;
	min-width: 250px;

}

.title {
	font-size: 35px;
	font-weight: 600;
}

.card2 .el-button {
	font-size: 20px;
}

.summary,
.category {
	margin-top: 20px;
	font-size: 14px;
	color: #6f6e6e;
}

.list {
	font-size: 14px;
	color: #534f4f;
	text-align: left;
	line-height: 14px;
	margin-top: 10px;
}

.card {
	display: flex;
	box-shadow: 0 4px 8px rgba(228, 228, 228, 0.5);
	background: #ffffff;
	align-items: center;
	flex-direction: column;
	padding: 10px 20px;
	margin-bottom: 30px;
}

.card img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
}

.card .name {
	margin-left: 20px;
	font-size: 16px;
}

.annex {
	margin: 10px 0;
	display: flex;
	flex-direction: column;
	background-color: #fff;
	min-height: 80px;
	line-height: 40px;
	font-size: 14px;
	color: #635b5b;
	padding: 20px;
	border-radius: 5px;
}

.downloadFile {
	cursor: pointer;
	font-size: 14px;
	color: #1667d0;
	margin: 50px;
}

.card .storename {
	margin-left: 20px;
	margin-top: 5px;
	font-size: 13px;
	color: #515767;
}

.el-button {
	margin: 5px;
}

.card2 {
	display: flex;
	align-items: center;
	flex-direction: column;
	box-shadow: 0 4px 8px rgba(228, 228, 228, 0.5);
	background: #ffffff;
	padding: 10px 20px;
	margin-bottom: 30px;
	width: 60px;
	border-radius: 20px;
	min-height: 150px;
}

.main {
	padding: 30px 10px;
	margin-left: 25px;
	margin-right: 25px;
	font-size: 15px;
	line-height: 25px;
	min-height: 300px;
	border-bottom: 1px solid #dfdfdf;
}

.me-view-comment {
	margin-top: 60px;
}

.me-view-comment-title {
	font-weight: 600;
	border-bottom: 1px solid #f0f0f0;
	padding: 15px;
}

.el-button {
	margin-bottom: 10px;
}

.me-view-comment-write {
	margin-top: 20px;
}

.me-view-comment-text {
	font-size: 15px;
}

.comment {
	margin: 20px;
	padding: 10px;
}

.commentcard {
	padding: 10px;
	border-bottom: 1px solid #e8e1e1;
}

.picture {
	width: 50px;
	height: 50px;
	overflow: hidden;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	margin: 0;
}

.me-view-picture {
	width: auto;
	height: 50px;
	border: 1px solid #ddd;
	vertical-align: middle;
	background-color: #5fb878;
	padding: 0;
}

.me-editor {
	z-index: 6 !important;
}

::v-deep .markdown-body code {
	color: #ef314e;
	background: rgba(231, 174, 175, 0.2);
}

.v-note-wrapper.fullscreen {
	top: 60px !important
}

::v-deep .hljs-regexp {
	color: #5d9eff !important;
}

::v-deep .markdown-body h1,
::v-deep .markdown-body h2,
::v-deep .markdown-body h3,
::v-deep .markdown-body h4,
::v-deep .markdown-body h5,
::v-deep .markdown-body h6 {
	font-weight: 700 !important;
	color: #3b3e50;
	;
}

::v-deep .markdown-body strong {
	font-weight: 700;
}

::v-deep .markdown-body strong {
	color: #4e5478;
}

::v-deep .markdown-body thead tr {
	background: rgba(76, 181, 155, 0.15) !important;
	color: #418c64;
}

::v-deep .hljs {
	border-radius: 5px;
	padding: 5px;
	background: rgba(31, 31, 31, 1.0);
	width: 100%;
	color: #e4fbff !important;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
}

::v-deep .hljs code {
	background: none;
	color: #e4fbff !important;
}

::v-deep .hljs-name {
	color: #ff4e51;
}

::v-deep .markdown-body img {
	max-width: 90%;
	z-index: 9999 !important;
}

::v-deep .hljs-punctuation {
	color: #fff;
}

::v-deep .hljs-number {
	color: #9d6fff;
}

::v-deep .hljs-keyword {
	color: #ff2c64;
}

::v-deep .hljs-operator {
	color: #ff3953;
}

::v-deep .hljs-type {
	color: #f1984e;
}

::v-deep::v-deep .hljs-selector-pseudo {
	color: #f1984e;
}

::v-deep .hljs-subst {
	color: #72ce5d;
}

::v-deep .markdown-body blockquote {
	color: #4a4b56 !important;
	border-left: .25em solid #e34b4d;
	padding: 10px;
	background: rgba(249, 179, 180, 0.1);
}

::v-deep.markdown-body mark {
	background: rgba(154, 255, 131, 0.4) !important;
}

::v-deep .hljs-variable.language_ {
	color: #ffac38 !important;
}

::v-deep .hljs-attr {
	color: #86e751;
}

::v-deep .hljs-string {
	color: #ffcd7b;
}

::v-deep .hljs-variable {
	color: #c8f572;
}

::v-deep .hljs-comment {
	color: #b8b8b8;
}

::v-deep .hljs-selector-class {
	color: #7feb51;
}

::v-deep .hljs-selector-tag {
	color: #ef7e49;
}

::v-deep .hljs-selector-id {
	color: #7feb51;
}

::v-deep .hljs-doctag {
	color: #ff5a5d;
}

::v-deep .hljs-attribute {
	color: #8fd8ff;
}

::v-deep .hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
	color: #7deb55 !important;

}

::v-deep .hljs-literal {
	color: #8275fa;
}

::v-deep .hljs-params {
	color: #72fff6;
}

::v-deep .hljs-title class_ {
	color: #38bac6;
}

::v-deep .markdown-body pre {
	border-radius: 10px !important;
	margin: 0;
	padding: 2px;
	width: 100% !important;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	flex-direction: row;

}

::v-deep .markdown-body pre code {
	width: 100% !important;

}

::v-deep .markdown-body a {
	color: #4a5c87;

}

.markdown-body {
	color: #1a1a1a;
	font-size: 15px;
}


@media screen and (max-width: 500px) {
	::v-deep .hljs {
		font-size: 14px !important;
	}

	.me-view-content {
		font-size: 13px;
	}
}
</style>
